<template>
  <div class="anchor">
    <van-form @submit="onSubmit">
      <div
        class="anchor_item"
        v-for="(item, index) in artist.anchor"
        :key="index"
      >
        <van-field class="clear_border">
          <template #label>
            <div class="tabs_box">
              <img :src="require('@/assets/zhuboxinxi.png')" />主播信息{{
                index + 1
              }}
            </div>
          </template>
          <template #input>
            <div></div>
          </template>
          <template #right-icon>
            <img
              v-if="artist.anchor.length != 1"
              class="icon"
              :src="require('@/assets/remove.png')"
              @click="delAnchor(index)"
            />
          </template>
        </van-field>
        <van-field
          v-model="artist.anchor[index].unique_id"
          name="主播ID"
          label="主播ID"
          placeholder="请输入主播ID"
          maxlength="50"
          @input="changeUniqueID(index)"
          :rules="[{ required: true }]"
        />
        <van-field
          v-if="artist.anchor[index].unique_id"
          v-model="artist.anchor[index].platforms_name"
          readonly
          clickable
          name="直播平台"
          label="直播平台"
          placeholder="请选择直播平台"
          :rules="[{ required: true }]"
          @click="choicePlatform(index)"
        >
          <template #right-icon>
            <img class="icon" :src="require('@/assets/field_right_icon.png')" />
          </template>
        </van-field>
        <van-field
          v-model="artist.anchor[index].nick_name"
          name="主播昵称"
          label="主播昵称"
          readonly
          class="readonly"
        />
        <van-field
          v-model="artist.anchor[index].real_name"
          name="公会实名"
          label="公会实名"
          readonly
          class="readonly"
        />
        <!-- v-model="artist.anchor[index].fans_num" -->
        <van-field name="粉丝数" label="粉丝数" readonly class="readonly">
          <template #input>
            <div style="height: 32px" v-if="artist.anchor[index].fans_num">
              {{ artist.anchor[index].fans_num | number_format(0) }}
            </div>
            <div style="height: 32px" v-else>
              {{ artist.anchor[index].fans_num }}
            </div>
            <!-- <div style="height:32px">{{ artist.anchor[index].fans_num ? (artist.anchor[index].fans_num | number_format(0)) : artist.anchor[index].fans_num==0?0:' '}}</div> -->
          </template>
        </van-field>
        <van-field
          v-model="artist.anchor[index].incomes"
          name="30日流水"
          label="30日流水"
          readonly
          class="readonly"
        />

        <van-field name="switch" label="设为主账号" class="switch_field">
          <template #input><div></div></template>
          <template #right-icon>
            <van-switch
              :value="artist.anchor[index].is_main == 1"
              size="20"
              @input="setMain(index)"
            />
          </template>
        </van-field>
      </div>
      <div class="add_new_data_box">
        <div @click="addAnchor">
          <van-icon name="add-o" color="#4C90FB" /><span>添加一个主播信息</span>
        </div>
      </div>
      <div class="sub_btn_box">
        <van-button class="btn" plain hairline type="info" native-type="submit"
          >下一步</van-button
        >
      </div>
    </van-form>

    <!-- 选择直播平台下拉数据 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        value-key="name"
        :columns="platform"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  reqPlatform,
  getAnchorInfoByUniqueId,
  validateAnchor,
} from "@/axios/artist";
import { mapGetters } from "vuex";
import { Toast } from "vant";
export default {
  computed: { ...mapGetters(["artist"]) },
  data() {
    return {
      showPicker: false,
      platform: [],
      currentAnchor: null,
    };
  },
  created() {
    this.getPlatform();
  },
  filters: {
    platforms(id, platform) {
      let text = "";
      platform.map((item) => {
        if (item.value == id) return (text = item.name);
      });
      return text;
    },
  },
  methods: {
    choicePlatform(index) {
      this.currentAnchor = index;
      this.showPicker = true;
    },
    onConfirm({ value, name }) {
      let i = this.currentAnchor;
      this.artist.anchor[i].platforms_id = value;
      this.artist.anchor[i].platforms_name = name;
      this.showPicker = false;
      this.getAnchorInfo();
    },
    getAnchorInfo() {
      Toast.loading({
        duration: 0,
        overlay: true,
      });
      let i = this.currentAnchor;
      let upAnchorInfo = (
        data = {
          nick_name: null,
          fans_num: null,
          id: null,
          real_name: null,
          thirty_incomes: null,
        }
      ) => {
        this.$set(this.artist.anchor[i], "nick_name", data.nick_name);
        this.$set(this.artist.anchor[i], "fans_num", data.fans_num);
        this.$set(this.artist.anchor[i], "id", data.id);
        this.$set(this.artist.anchor[i], "real_name", data.real_name);
        this.$set(this.artist.anchor[i], "incomes", data.thirty_incomes);
      };

      getAnchorInfoByUniqueId({
        unique_id: this.artist.anchor[i].unique_id,
        platforms_id: this.artist.anchor[i].platforms_id,
      })
        .then((res) => {
          Toast.clear();
          upAnchorInfo(res);
        })
        .catch((err) => {
          upAnchorInfo();
          console.log("AnchorInfoByUniqueId:error", err);
          Toast.clear();
          Toast.fail(err);
        });
    },

    // 切换主账号
    setMain(index) {
      this.artist.anchor.map((item, i) => {
        item.is_main = index == i;
      });
    },
    addAnchor() {
      this.$set(this.artist.anchor, this.artist.anchor.length, {
        id: "", //主键
        unique_id: "", //主播id
        platforms_id: "", //平台id
        platforms_name: "", //平台
        is_main: false, //是否是主键1是 2否
      });
    },
    delAnchor(i) {
      if (this.artist.anchor[i].is_main) {
        this.$set(this.artist.anchor[0], "is_main", true);
      }
      this.artist.anchor.splice(i, 1);
    },
    changeUniqueID(i) {
      let infoList = [
        "id",
        "platforms_id",
        "platforms_name",
        "nick_name",
        "fans_num",
        "real_name",
        "incomes",
      ];
      infoList.map((item) => {
        this.$set(this.artist.anchor[i], item, null);
      });
    },
    onSubmit() {
      Toast.loading({
        duration: 0,
        overlay: true,
      });
      console.log('artist',this.artist)
      validateAnchor({
        anchor: this.artist.anchor,
        artist_id: this.artist.artist_id,
      })
        .then((res) => {
          Toast.clear();
          this.$store.dispatch("artist/setCurrent", 2);
        })
        .catch((err) => {
          Toast.clear();
          Toast.fail(err);
        });
    },

    async getPlatform() {
      this.platform = await reqPlatform();
    },
  },
};
</script>

<style scoped>
@import "./css/input.css";
@import "../css/index.css";
.anchor_item:not(:first-child) {
  margin-top: 8px;
}
.tabs_box {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #110b32;
  display: flex;
  align-items: center;
}
.tabs_box img {
  margin-right: 4px;
  width: 12px;
  height: 12px;
}
.anchor >>> .van-cell.switch_field .van-cell__title {
  color: #535968;
  font-weight: 500;
  color: #535968;
}
.icon {
  width: 15px;
  height: 15px;
}
.readonly >>> .van-field__body {
  background-color: #f1f3f6;
}

.add_new_data_box {
  border-top: 1px solid #f5f7fb;
}

.anchor >>> .van-picker .van-picker__toolbar {
  border-bottom: 1px solid #f5f7fb;
}
.anchor >>> .van-picker .van-picker__toolbar button {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}
.anchor >>> .van-picker__confirm {
  color: #4c90fb;
}

.anchor >>> .van-picker__columns .van-picker-column__item--selected {
  font-size: 24px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #535968;
  background-color: #f4f4f4;
  margin: 0 10px;
  border-radius: 8px;
}
.anchor >>> .van-overlay {
  background-color: rgba(0, 0, 0, 0.7) !important;
}
</style>